<template>
  <div class="dashboard-container">
    <h1>房间管理</h1>

    <div>
      <el-button type="primary" @click="addButton" style="width:100px;margin-left:40px">新增</el-button>

      <el-input placeholder="房间名称" v-model="roomNumber" clearable style="width:200px;margin-left:40px"/>
      <el-select v-model="roomTypeName" clearable placeholder="房间类型" style="width:200px;margin-left:40px">
        <el-option v-for="item in roomTypeList" :key="item.roomTypeName" :label="item.roomTypeName + '-' + item.roomPrice" :value="item.roomTypeName"/>
      </el-select>


      <el-button type="primary" @click="selectAll" style="width:100px;margin-left:40px">查询</el-button>
      <el-button @click="checkUser" style="width:100px;margin-left:40px">重置</el-button>
      <el-table :data="roomList" height="659px" border style="width: 100%;margin-top: 20px">
        <el-table-column align="center" fixed prop="roomId" label="房间id" sortable/>
        <el-table-column align="center" fixed prop="roomNumber" label="房间号" sortable/>
        <el-table-column align="center" fixed prop="roomTypeName" label="房间类型" sortable/>
        <el-table-column align="center" fixed prop="roomPrice" label="房间价格" sortable/>
        <el-table-column align="center" fixed prop="remark" label="备注" sortable/>
        <el-table-column align="center" fixed label="操作">

          <template v-slot="scope">
            <el-button type="text" @click="updateBound(scope.row)" >修改</el-button>
            <el-button type="text" @click="deleteBound(scope.row)" v-if="scope.row.roleId != 1">删除</el-button>
            <el-button type="text" disabled v-else>删除</el-button>
          </template>
        </el-table-column>


      </el-table>
      <el-dialog title="是否删除" width="40%" :visible.sync="deleteButtonController" >
        <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="deleteUser">确定</el-button>
              <el-button @click="deleteButtonController = false">取消</el-button>
          </span>
      </el-dialog>


      <el-dialog title="新增" width="40%" :visible.sync="addButtonController" @close="closeUser('ruleForm')">
        <el-form label-width="20%" :rules="roles" :model="addList" ref="ruleForm">

          <el-form-item label="房间类型" prop="roomTypeId">
            <el-select v-model="addList.roomTypeId" clearable placeholder="房间类型"  style="width: 80%">
              <el-option v-for="item in roomTypeList" :key="item.roomTypeName + '-' + item.roomPrice" :label="item.roomTypeName" :value="item.roomTypeId"/>
            </el-select>
          </el-form-item>



          <el-form-item label="房间号" prop="roomNumber">
            <el-input v-model="addList.roomNumber" maxlength="20" show-word-limit style="width: 80%" clearable
                      placeholder="房间号"/>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="addList.remark" maxlength="10" show-word-limit style="width: 40%" clearable
                      placeholder="请输入备注"/>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser('ruleForm')">确定</el-button>
        <el-button @click="closeUser('ruleForm')">取消</el-button>
      </span>
      </el-dialog>

      <el-dialog title="修改" width="40%" :visible.sync="updateButtonController" @close="closeUser('ruleForm')">
        <el-form label-width="20%" :rules="roles" :model="updateList" ref="ruleForm">
          <el-form-item label="房间类型" prop="roomTypeId">
            <el-select v-model="updateList.roomTypeId" clearable placeholder="房间类型"  style="width: 80%">
              <el-option v-for="item in roomTypeList" :key="item.roomTypeName + '-' + item.roomPrice" :label="item.roomTypeName" :value="item.roomTypeId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="房间号" prop="roomNumber">
            <el-input v-model="updateList.roomNumber" maxlength="6" show-word-limit style="width: 80%" clearable
                      placeholder="房间号"/>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="updateList.remark" maxlength="10" show-word-limit style="width: 40%" clearable
                      placeholder="请输入备注"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUser('ruleForm')">确定</el-button>
        <el-button @click="closeUser('ruleForm')">取消</el-button>
      </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {mapGetters} from 'vuex'
import {deletess, insertss, selectRoom, updatess} from "@/api/room";
import {selectRoomType} from "@/api/RoomType";

export default {
  name: 'room',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },

  data() {
    return {
      roomTypeName: '',
      roomNumber: '',
      roomTypeList: [],
      roomIdList: [{
        value: '1',
        label: '1'
      },
        {
          value: '2',
          label: '2'
        }],
      roomList: [],

      addButtonController: false,
      addList: {
        roomNumber: '',
        roomTypeId: '',
        remark: '',
      },
      // 修改
      updateButtonController: false,
      updateList: {
        roomTypeId: '',
        roomId: '',
        roomNumber: '',
        remark: '',
        roomTableId: ''
      },
      // 删除
      deleteButtonController: false,
      roomId: '',
      roomTableId: '',
      roles: {
        roomNumber: [
          {required: true, trigger: 'blur', message: '不能为空'},
          {min: 1, max: 6, message: '格式错误', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.selectAll()
  },
  methods: {
    selectAll() {
      // if (this.userId1==null || this.userName1==null || this.roleName1){
      //   this.disabled=no
      // }else
      console.log('roomId:' + this.roomId)
      console.log('roomTypeName:' + this.roomTypeName)
      console.log('roomNumber:' + this.roomNumber)
      selectRoom({
        roomTypeName: this.roomTypeName,
        roomNumber: this.roomNumber
      }).then(
        response => {
          console.log(response.data)
          this.roomList = response.data
        }
      )
      selectRoomType({
        roomTypeName: this.roomTypeName,
        roomPrice: this.roomPrice
      }).then(
        response => {
          console.log(response.data)
          this.roomTypeList = response.data
        }
      )
    },
    checkUser() {
      this.roomTypeName = ''
      this.roomNumber = ''
      this.selectAll()
    },
    addButton() {
      this.addButtonController = true
      this.addList = {
        roomTypeId: '',
        roomNumber: '',
        remark: ''
      }
    },
    addUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertss({
            roomNumber: this.addList.roomNumber,
            roomTypeId: this.addList.roomTypeId,
            remark: this.addList.remark
          }).then(
            response => {
              console.log(response.data)
              this.addButtonController = false
              this.selectAll()
            }
          )
        } else {
          return false
        }
      })
    },
    updateBound(row) {
      this.updateList = {
        roomPrice: row.roomPrice,
        roomTypeId: row.roomTypeId,
        roomNumber: row.roomNumber,
        roomId: row.roomId,
        remark: row.remark,
        roomTableId: row.roomTableId
      }
      this.updateButtonController = true
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updatess({
            roomTypeId: this.updateList.roomTypeId,
            roomNumber: this.updateList.roomNumber,
            roomId: this.updateList.roomId,
            remark: this.updateList.remark,
            roomTableId: this.updateList.roomTableId
          }).then(
            response => {
              this.updateButtonController = false
              this.selectAll()
            }
          )
        } else {
          return false
        }
      })
    },
    deleteBound(row) {
      this.deleteButtonController = true
      this.roomId = row.roomId
      this.roomTableId = row.roomTableId
    },
    deleteUser() {
      deletess({
        roomId: this.roomId,
        roomTableId: this.roomTableId
      }).then(
        response => {
          this.deleteButtonController = false
          this.selectAll()
        }
      )
    },
    closeUser(formName) {
      this.$refs[formName].resetFields();
      this.addButtonController = false
      this.updateButtonController = false
      this.deleteButtonController = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
